<template>
  <div class="videoInvitation">
    <div class="userInfo">
      <div class="userImg">
        <avatar :imgID="oppositeInfo.user_img_id" :id="videoCallInfo.oppositeID" :radius="true"></avatar>
      </div>
      <div class="nameAndInviter">
        <p class="userName">{{ oppositeInfo.remarks || oppositeInfo.user_name }}</p>
        <p class="tips">{{ videoCallInfo.isInviter ? '等待对方接受邀请...' : '邀请你视频通话...' }}</p>
      </div>
    </div>
    <div :class="['operation', videoCallInfo.isInviter ? 'inviter' : 'invitees']">
      <div class="hangUp cp" @click="cancel">
        <img src="@/assets/message/hangUp.png" alt="">
        <p>取消</p>
      </div>
      <div class="answerPhone cp" v-if="!videoCallInfo.isInviter" @click="answerPhone">
        <img src="@/assets/message/answerPhone.png" alt="">
        <p>接听</p>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSock } from '@/utils/socketSend'

export default {
  name: 'videoInvitation',
  computed: {
    // 好友视频相关信息
    videoCallInfo () {
      return this.$store.state.message.videoCallInfo
    },
    // 对方信息
    oppositeInfo () {
      return this.$store.state.chatInformation.userList[this.videoCallInfo.oppositeID]
    },
    // 当前通话msg_id
    msg_id () {
      return this.$store.state.message.videoCallMsgID
    }
  },
  methods: {
    // 取消拨打/拒绝接听
    cancel () {
      // 取消拨打
      if (this.videoCallInfo.isInviter) {
        sendSock({
          type: '2.1.3',
          body: {
            msg_id: this.msg_id
          }
        })
        // 设置取消拨打的reqID
        this.$store.commit('socket/set_operationReqId', 'cancelVideoCallId')
      } else {
        // 拒绝接听
        sendSock({
          type: '2.1.7',
          body: {
            msg_id: this.msg_id
          }
        })
        // 设置拒绝通话的reqID
        this.$store.commit('socket/set_operationReqId', 'refuseVideoCallId')
      }
    },
    // 接听
    answerPhone () {
      sendSock({
        type: '2.1.5',
        body: {
          msg_id: this.msg_id
        }
      })
      // 设置接受通话的reqID
      this.$store.commit('socket/set_operationReqId', 'acceptVideoCallId')
    }
  }
}
</script>

<style scoped lang="scss">
.videoInvitation {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 560px;
  border-radius: 4px;
  background: linear-gradient(180deg,#1d2958 0%, #1b172b 77%);
  z-index: 99;
  padding: 48px 30px 36px;

  .userInfo {
    width: 100%;
    height: 64px;
    font-size: 0;

    .userImg {
      width: 64px;
      height: 64px;
      display: inline-block;
      vertical-align: top;
    }

    .nameAndInviter {
      margin-left: 16px;
      display: inline-block;
      height: 64px;

      .userName {
        font-size: 20px;
        color: #fff;
      }

      .tips {
        margin-top: 16px;
        color: rgba(255,255,255,0.8);
        font-size: 14px;
      }
    }
  }

  .operation {
    margin-top: 326px;
    .hangUp, .answerPhone {
      display: inline-block;
      font-size: 0;
      width: 56px;
      img {
        width: 56px;
        height: 56px;
      }
      p {
        margin-top: 12px;
        text-align: center;
        font-size: 12px;
        color: #fff;
      }
    }
  }
  .inviter {
    text-align: center;
  }
  .invitees {
    padding: 0 54px;
    .hangUp {
      margin-right: 80px;
    }
  }
}
</style>
